<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <cpn></cpn>
        <cpn ref="a"></cpn>
        <cpn ref="b"></cpn>
        <button @click="btnClick">按钮</button>
    </div>

    <!-- 父组件访问子组件: 使用 $children 或 $refs -->
    <template id="cpn">
        <div>我是子组件</div>
    </template>

    <script src="../js/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {

            },
            methods: {
                btnClick(){
                    //访问子组件,this.$children对应的是一个数组,因为一个父组件可能对应多个子组件
                    //$children用的较少,因为模板位置可能发生改变,即下标也会跟着改变
                    console.log(this.$children)

                    for(let n of this.$children){
                        console.log(n.message)
                        n.childMessage()
                    }
                    //直接调用子组件中的方法
                    // this.$children[0].childMessage()

                    //$refs,当需要使用时,需要在对应模板加ref属性,开发中通常使用这种方式,对应的是一个对象类型,默认是一个空对象
                    console.log(this.$refs)
                    console.log(this.$refs.a.message)
                    this.$refs.a.childMessage()
                }
            },
            components: {
                cpn: {
                    template: '#cpn',
                    data(){
                        return {
                            message: '养天地正气,法古今完人'
                        }
                    },
                    methods: {
                        childMessage(){
                            console.log("苏州大学")
                        }
                    }
                }
            }
        })

    </script>
</body>
</html>